# Component: Anniversary Slider

Interactive date selection via range input

![[Pasted image 20260426074751.png]]


### BEM Anatomy

| Type      | Class Name               | Description                                                                  |
| --------- | ------------------------ | ---------------------------------------------------------------------------- |
| ==Block== | `.as-anniversary-slider` | The main component container.                                                |
| Element   | `__date`                 | Displays the currently selected date string. Centered by default.            |
| Element   | `__controls`             | A Flexbox container that aligns the buttons and the slider.                  |
| Element   | `__action`               | The navigation buttons (Previous/Next).                                      |
| Modifier  | `__action--prev`         | Modifier for the "Previous" directional button.                              |
| Modifier  | `__action--next`         | Modifier for the "Next" directional button.                                  |
| Element   | `__slider-container`     | The wrapper for the RangeInput. Controls growth and hides default datalists. |

### Implementation Reference

##### Generated HTML

```html
<div class="as-anniversary-slider">
    <p class="as-anniversary-slider__date">Saturday, April 25, 2026</p>

    <div class="as-anniversary-slider__controls">
        <button class="as-anniversary-slider__action as-anniversary-slider__action--prev btn btn-link">
            <i class="fa-solid fa-angle-left"></i>
        </button>
        
        <div class="as-anniversary-slider__slider-container">
            <input type="range" class="form-range" ... />
        </div>

        <button class="as-anniversary-slider__action as-anniversary-slider__action--next btn btn-link">
            <i class="fa-solid fa-angle-right"></i>
        </button>
    </div>
</div>
```

##### SCSS

```scss
.as-anniversary-slider {
  &__controls {
    display: flex; // Align buttons and slider
  }
  &__action {
    align-self: center;
  }
  &__slider-container {
    flex-grow: 1; // Take up remaining space
    align-self: center;
    
    // Specifically hides Blazorise datalist
    datalist.bb-range-data-list {
      display: none;
    }
  }
}
```

